  %personalgroup{
        border-radius:20rpx;
        
        overflow:hidden;
        margin-bottom: 30rpx;
        padding: 30rpx;
      
    }
  
    .personal{
        background: #f5f5f5;
        min-height:100vh;

        &-handle{
      
          overflow:hidden;
          margin-bottom: 30rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .item{
            border-radius:20rpx;
            width: 340rpx;
            padding: 40rpx 0;
            background: #fff;
            text-align: center;
            image{
               width: 48rpx;
               height:48rpx;
               display: block;
               margin: 0 auto 10rpx;
             
            }
          
            text{
              font-size: 24rpx;
              color: #333;
             
             

            }
          }
        }
        &-group{
            @extend %personalgroup;
        }
        &-title{
           display: block;
           font-size:36rpx;
           color:#333;
           padding:10px 30rpx;
           line-height: 1;
           font-weight: bold;
          
        }
        &-more{
            font-size: 24rpx;
            color:#939393;
            float:right;
            line-height:40rpx;
            position: relative;
            &:after{
                content:'';
                display: inline-block;
                width:12rpx;
                height:12rpx;
                border-top:3rpx solid #939393;
                border-right:3rpx solid #939393;
                transform: rotate(45deg);
                vertical-align: middle;
                margin-top: -3px;
                margin-left: 6rpx;
            }
        }
        &-recode{
             @extend %personalgroup;
             z-index: 1;
             position: relative;
             background: #fff;
           
             .title{
                 color:#000;
                 font-size:26rpx;
                 line-height:1;
                 padding:30rpx 30rpx 40rpx;
                 display:block;
             }

             .ul{
              
                 display: flex;
                justify-content:space-between;
                color:#000;
                font-size:24rpx;
                 .li{
                    flex:1;
                    display: block;
                    text-align: center;
            
                    text{
                        display: block;
                        line-height: 1;
                      
                        &:first-child{
                            font-size: 32rpx;
                            font-weight: bold;
                            padding-bottom: 15rpx;
                            color:#333;
                            line-height: 1;
      
                        }
                    }
                 } 
             }
        }
        &-content{
            position: relative;
            z-index: 2;
             padding:20rpx;
        }

        &-integral{
                font-size: 26rpx;
                display: flex;
                padding:20rpx 30rpx;
                align-items:center;
                image{
                    width:110rpx;
                    height:80rpx
                }
              
                view{
                    color:#999;
                    &:first-child{
                         text-align: center;
                          text {
                            display: block;
                            white-space: nowrap;
                            &:first-child{
                                color:#4ed27a;
                            }
                          }
                    }
                    &:nth-child(2){
                        padding:0 15rpx;
                        
                    }
                    &:last-child{
                        text-align: center;
                        width: 108rpx;
                       
                    }
                }
        }
    }

    .logout {
      margin: 0 30rpx 30rpx;
      border-radius: 18rpx;
      background:#ff67b0;
      color:#fff;
      height:80rpx;
      line-height:80rpx;
      &:after{
          border:none;
      }
    }

    .ordertype{
          
           &-group{
               padding: 30rpx 0 10rpx;
                background: #fff;
                @extend %personalgroup;
               ~ .ordertype-group{
                   margin-top: 30rpx;
               }
              
           }
            &-top{
               overflow: hidden;  
               position: relative;
               margin-bottom: 40rpx;
               padding: 0 30rpx;
               line-height: 1;
            }
            &-title{
              
                color:#000;
                font-size:30rpx;
                font-weight: bold;
            }
            &-more{
                position: absolute;
                bottom:0;
                right:30rpx;
                font-size:24rpx;
                color:#666;
                line-height: 1;
                image{
                  height: 20rpx;
                  width: 11rpx;
                  display: inline-block;
                  overflow: hidden;
                }
              
            }

            &-list{
                font-size:0;
                padding:0 10rpx;
                display: flex;
                justify-content: space-between;
                view{
                    flex:1;
                    text-align: center;
                    vertical-align: top;
                   
                    image{
                      width:48rpx;
                      height:48rpx; 
                      margin-bottom:20rpx; 
                    
                    }
                    text{
                       font-size:24rpx;
                       color:#333; 
                       display: block;
                    }
                }
            }
    }


 
  /deep/ .getuserinfo {
    position: absolute;
    left: 0rpx;
    top: 0rpx;
    background: rgba(0, 0, 0, 0);
    color: #fff;
    line-height: 1.5;
    width: 150rpx;
    height: 150rpx;

    &:after {
      border: none;
    }
  }

  /deep/  .usr {
   
    &-info {
      height:370rpx;
      width: 100%;
      position: relative;
      z-index:1 ;
     
      >image {
        width: 100%;
        height: 100%;
      }
    }

    &-group {
        height: 118rpx;
        position: absolute;
        top:50%;
        left:35rpx;
        right:35rpx;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        z-index: 2;
    } 

    &-head {
      width:118rpx;
      height: 118rpx;
      border-radius: 50%;
      overflow: hidden;
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;

      image {
        width: 100%;
        height: 100%;
      }
    }

    &-ul {
      box-sizing: border-box;
      vertical-align: top;
      font-size: 36rpx;
      padding-left: 30rpx;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color:#fff;
      text-align: left;
     
      .level{
           padding: 0 20rpx;
          height:45rpx;
          border-radius: 26rpx;
          color:$my-main-color;
          background: #fff;
          font-size: 24rpx;
          text-align: center;
          line-height:45rpx;
          font-weight: bold;

      }
    }

    &-qrcode{
       width: 40rpx;
       height: 40rpx;
       position: absolute;
       right:0;
       top:50%;
       transform: translateY(-50%);
    }

      &-btm{
        position: absolute;
        left:20rpx;
        right:20rpx;
        bottom:0;
        height: 72rpx;
        border-radius: 30rpx 30rpx 0 0;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color:#330000;
        z-index: 2;
        &-news{
            
            font-size: 28rpx;
            margin-left: 40rpx;
            width: 370rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        &-more{
          position: relative;
          width: 186rpx;
          height: 55rpx;
          margin-right: 30rpx;
          line-height: 55rpx;
          text-align: center;
          image{
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
          }
          .t{
              font-size: 26rpx;
              position: absolute;
              top:0;
              right:0;
              left:0;
              bottom:0;
              z-index: 2;
              &:after{
                content:'';
                display: inline-block;
                overflow: hidden;
                border:10rpx solid  #330000;
                border-top:8rpx solid transparent;
                border-right: none;
                border-bottom:8rpx  solid transparent;
                margin-left:5rpx;
          
              }
          }
        }
    }
  }